<template>
	<div>
		<div class="main-center" style="justify-content: space-between;">
			<div>
				<div class="main-list">
					<div class="main-box" v-for="i in dataAll" @click="goInfo(i)">
						<div class="main-box-l">
							<p class="main-title">{{i.title}}</p>
							<div class="main-tag">
								<template v-for="j in i.tag">
									<Tag>{{j}}</Tag>
								</template>
							</div>
							<div class="main-box-bottom">
								<div class="main-bottom-item">
									<img src="../../img/look.png" />浏览:{{i.browse}}
								</div>
								<div class="main-bottom-item">
									<img src="../../img/ren.png" />评论:{{i.commentNum}}
								</div>
								<div class="main-bottom-item">
									<time>{{i.createTime}}</time>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="margin-bottom: 20px;">
					<Page :total="total" :page-size='pageSize' show-total @on-change="pageChange"></Page>
				</div>
			</div>
			<div class="home-tag">
				<div style="border-radius:5px;background: #fff;padding: 10px;">
					<template v-for="i in tagArr">
						<Tag @click.native="queryTag(i)">{{i}}</Tag>
					</template>
					<Tag @click.native="getData(1)">全部</Tag>
					<div style="margin-top: 10px;">
						<Input v-model="sgml" placeholder="上古密令" @on-keyup="onEnter" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import * as api from '@/assets/api.js';
	import { Tag,Page,Input   } from 'iview';
	export default {
		components: {
			Tag,
			Page,
			Input 
		},
		data() {
			return {
				dataAll: [],
				total:0,
				tagArr:[],
				pageSize:10,
				sgml:''
			}
		},
		created() {
			this.getData(1);
			this.getTag()
			
		},
		methods:{
			getData(index){
				this.$Spin.show();
				api.getData('getContent?index='+index, this).then((res) => {
					if(res.code == 200) {
						this.pageSize=10;
						this.dataAll = res.data;
						this.total = res.total;
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
					this.$Spin.hide();
				})				
			},
			getTag(){
	        	api.getData('getTag', this).then((res) => {
					if(res.code == 200) {
						this.tagArr = res.data;
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})				
	        },
			goInfo(i){
				sessionStorage.setItem('id',i._id)
				this.$router.push({
					name: 'info'
				});
			},
			pageChange(index){
				this.getData(index)
			},
			queryTag(name){
				this.$Spin.show();
				api.getData('queryTag?'+'&name='+name, this).then((res) => {
					if(res.code == 200) {
						this.dataAll = res.data;
						
						this.total=this.pageSize = res.total;
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
					this.$Spin.hide();
				})				
			},
			onEnter(e){
				if(e.keyCode == 13){
					if(this.sgml == 'ccav'){
						sessionStorage.setItem('user','master')
						this.$Message.success('神力无敌!');
					}else if(this.sgml == '233'){
						sessionStorage.setItem('user','233')
						this.$Message.success('白日飞升!');
					}else{
						this.$Message.error('这是无效密令,别瞎j8输入了!');
					}
					this.sgml = ''
				}
			}
		}
	}
</script>

<style>
	
	.main-list {
		width: 600px;
	}
	.home-tag {
		width: 320px;
	}
	
	.main-box {
		background: #FFFFFF;
		padding: 20px;
		border-radius: 6px;
		display: flex;
		margin-bottom: 10px;
		transition: all .5s ease-in;
		cursor: pointer;
	}
	
	.main-box-l {
		flex: 1;
		padding-right: 10px;
	}
	
	.main-title {
		font-size: 16px;
		margin-bottom: 6px;
	}
	
	.main-tag {
		margin-bottom: 6px;
	}
	
	.main-text {
		font-size: 14px;
		margin-bottom: 4px;
	}
	
	.main-box-r {
		width: 160px;
		display: flex;
		align-items: center;
	}
	
	.main-box-img {
		width: 100%;
	}
	
	.main-box-bottom {
		display: flex;
	}
	
	.main-bottom-item {
		display: flex;
		align-items: flex-end;
		margin-right: 10px;
	}
	
	.main-bottom-item img {
		width: 32px;
		margin-right: 6px;
	}
	
	@media screen and (max-width: 1600px) {
		.main-bg {
			min-height: 800px;
		}
	}
</style>